<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级检索-回收详情</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
    <div class="zr_header">
        <div class="zr-center-box">
            <img src="img/logo.png" class="zr_logo"/>
            <ul class="zr_tab">
                <li class="zr_tab-border">我的问卷</li>
                <li>高级检索</li>
                <li>综合题库</li>
                <li>用户管理</li>
                <li>考察点管理</li>
                <li>联系人管理</li>
                <li>帮助中心</li>
            </ul>
            <div class="zr_right-box">
                <img class="zr_head-img" src="img/header.png"/>
                <span>dnnfdsh</span>
                <span>|</span>
                <span>退出</span>
            </div>
        </div>
    </div>
    <div class="zr_fixed-box"></div>
    <div class="zr_search-box">
        <div class="zr-center-box">
            <div class="zr_search-form zr_pointer zr_float-l">
                <div class="zr_til-form">
                    <img src="img/lt.png" class="zr_back-icon"/>
                    <span>返回</span>
                    <span class="zr_sg">|</span>
                    <span class="zr_green-ionic">问卷浏览：民众调查——青运会对高校大学生体育锻炼意识的影响问卷调查表</span>
                </div>
            </div>
            <div class="zr_float-r zr-line">当前已收集问卷<span class="zr_green-ionic"> 579 </span>份</div>
        </div>
    </div>
    <div class="zr-center-box">
        <div class="zr_float-l w-15 zr-bg">
            <ul class="zr-nav-list">
                <li><div class="zr-li-box"><img src="img/zny.png" class="zr-icon-left"/>回收概况</div></li>
                <li><div class="zr-li-box"><img src="img/sj.png" class="zr-icon-left"/>基础数据</div></li>
                <li><div class="zr-li-box"><img src="img/03.png" class="zr-icon-left"/>回收详情</div></li>
                <li class="zr-click-bg"><div class="zr-li-box"><img src="img/04.png" class="zr-icon-left"/>统计分析</div></li>
                <li><div class="zr-li-box"><img src="img/gj.png" class="zr-icon-left"/>轨迹跟踪</div></li>
                <li><div class="zr-li-box"><img src="img/work.png" class="zr-icon-left"/>工作量分析</div></li>
            </ul>
        </div>
        <div class="zr_float-r w-85">
            <div class="zr-top-ul">
                <ul class="zr_float-l" id="nav-list">
                    <li class="zr_green-ionic">题目分析</li>
                    <li>交叉分析</li>
                    <li>主观题分析</li>
                    <li>跨卷分析</li>
                    <li>答题时间分析</li>
                </ul>
                <div class="zr_float-r zr-line">
                    最后更新时间 2017/11/28 16:25:36
                </div>
            </div>
            <div class="zr-center-box w-100">
                <div class="zr_common-box zr_table-white">
                    <table>
                        <thead>
                        <tr>
                            <td class="w-3">
                                <input type="checkbox"/>
                            </td>
                            <td class="w-90 zr_text-left" style="color: #000;">
                                <div class="zr_float-l" style="margin-top: 7px;">全选</div>
                                <div class="zr_float-r">
                                    <div class="zr_float-l zr_button">
                                        <img src="./img/add-icon.png" class="zr_ionic-show">打印
                                    </div>
                                    <div class="zr_float-l zr_button">
                                        <img src="img/01.png" class="zr_ionic-show">导出
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="zr_tr-border">
                            <td>
                                <input class="zr-check-left" type="checkbox"/>
                            </td>
                            <td class="zr_text-left">
                                <div class="zr_td-div">1.性别？</div>
                                <label class="zr_choice-rodio"><input type="radio" name="sex" class="zr_radio"/>男</label>
                                <label class="zr_choice-rodio"><input type="radio" name="sex" class="zr_radio"/>女</label>
                                <div class="zr-char-box">
                                    <img src="img/char.jpg"/>
                                    <div class="zr-pos-sel">
                                        <select class="zr_float-l zr_sel zr_sel-mar">
                                            <option>图表类型</option>
                                        </select>
                                        <select class="zr_float-l zr_sel zr_sel-mar">
                                            <option>显示设置</option>
                                        </select>
                                        <select class="zr_float-l zr_sel zr_sel-mar">
                                            <option>导出</option>
                                        </select>
                                    </div>
                                </div>
                                <table class="zr-dashed-table">
                                    <thead>
                                        <tr>
                                            <td class="w-50">选项</td>
                                            <td class="w-25">小计</td>
                                            <td class="w-25">比例</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>A男</td>
                                            <td>0</td>
                                            <td>0.00%</td>
                                        </tr>
                                        <tr>
                                            <td>B女</td>
                                            <td>0</td>
                                            <td>0.00%</td>
                                        </tr>
                                        <tr>
                                            <td>问卷总作答人数：567人</td>
                                            <td colspan="2">本题有效填写人次：327人</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr class="zr_tr-border">
                            <td>
                                <div class="zr-td-num">02</div>
                            </td>
                            <td class="zr_text-left">
                                <div class="zr_td-div">年龄？</div>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>18岁以下</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>18 - 25岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>26 - 30岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>30 - 40岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>41 - 50岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>51 - 60岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>60岁以上</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>30 - 40岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>41 - 50岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>51 - 60岁</label>
                                <label class="zr_choice-rodio"><input type="radio" name="age" class="zr_radio"/>60岁以上</label>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="zr_common-box zr_hidden">
                  <div class="zr-top-search">
                      <span class="zr_float-l zr-title zr-mar-left-no">自定义行</span>
                      <select class="zr_float-l zr_sel zr_sel-mar green-border ellipse">
                          <option>你母亲经常会给你送很多东西吗？</option>
                      </select>
                      <img class="zr_float-l" src="img/jiaohuan.png" style="margin: 22px 10px 0 0; "/>
                      <span class="zr_float-l zr-title zr-mar-left-no">自定义列</span>
                      <select class="zr_float-l zr_sel zr_sel-mar green-border ellipse">
                          <option>你母亲经常会给你送很多东西吗？</option>
                      </select>
                      <div class="zr_float-r">
                          <div class="zr_float-l zr_button">
                              开始分析
                          </div>
                          <div class="zr_float-l zr_button">
                              <img src="img/sc1.png" class="zr_ionic-show">打印
                          </div>
                      </div>
                  </div>
                </div>
                <div class="zr_common-box zr_hidden">
                    <div class="zr-top-search">
                        <span class="zr_float-l zr-title zr-mar-left-no" style="margin: 15px 30px;">选择题目</span>
                        <select class="zr_float-l zr_sel zr_sel-mar green-border ellipse" style="width: 70%;">
                            <option>你母亲经常会给你送很多东你母亲经常会给你送很多东西吗？</option>
                        </select>
                        <div class="zr_float-r zr_button">
                            开始分析
                        </div>
                    </div>
                    <div class="zr-top-search">
                        <span class="zr_float-l zr-title zr-mar-left-no" style="margin: 15px 20px 0 30px;">关键字分析</span>
                        <div class="zr_float-l">
                            <label>
                                <input type="checkbox" class="zr_float-l" style="margin: 24px 10px;"/>
                                <span class="zr_float-l zr-title zr-mar-left-no">对</span>
                                <select class="zr_float-l zr_sel zr_sel-mar">
                                    <option>全部</option>
                                </select>
                                <span class="zr_float-l zr-title zr-mar-left-no">个关键词分析</span>
                            </label>
                            <label>
                                <input type="checkbox" class="zr_float-l" style="margin: 24px 10px 0 50px;"/>
                                <span class="zr_float-l zr-title zr-mar-left-no">关键字分析</span>
                            </label>
                            <input class="zr_float-l zr_input-box zr_input-max" type="text" placeholder="请输入想分析的关键字"/>
                            <div class="zr_float-l zr_add-box">
                                <img src="img/a1.PNG">
                                <img src="img/a2.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="zr_common-box zr_hidden">
                    <div class="zr-top-search">
                        <span class="zr_float-l zr-title zr-mar-left-no" style="margin: 15px 30px;">选择题目</span>
                        <select class="zr_float-l zr_sel zr_sel-mar green-border ellipse" style="width: 70%;">
                            <option>你母亲经常会给你送很多东你母亲经常会给你送很多东西吗？</option>
                        </select>
                        <div class="zr_float-r">
                            <div class="zr_float-l zr_button">
                                开始分析
                            </div>
                            <div class="zr_float-l zr_button">
                                <img src="img/sc1.png" class="zr_ionic-show">打印
                            </div>
                        </div>
                    </div>
                    <div class="zr-top-search">
                        <span class="zr_float-l zr-title zr-mar-left-no" style="margin: 15px 36px;">与试卷</span>
                        <select class="zr_float-l zr_sel zr_sel-mar green-border ellipse">
                            <option>你母亲经常会给你送很多东西吗？</option>
                        </select>
                        <span class="zr_float-l zr-title zr-mar-left-no">的题目</span>
                        <select class="zr_float-l zr_sel zr_sel-mar green-border ellipse">
                            <option>你母亲经常会给你送很多东西吗？</option>
                        </select>
                        <span class="zr_float-l zr-title zr-mar-left-no">跨卷分析</span>
                    </div>
                </div>
                <div class="zr_common-box zr_hidden">
                    <div class="zr-top-search">
                        <form class="zr_form zr_float-l">
                            <div class="zr_til-form">统计方式：</div>
                            <label class="zr_rodios"><input type="radio" name="state">分组</label>
                            <label class="zr_rodios"><input type="radio" name="state">均值</label>
                        </form>
                        <div class="zr_float-r">
                            <div class="zr_float-l zr_button">
                                开始分析
                            </div>
                        </div>
                    </div>
                    <div class="zr-top-search">
                        <span class="zr_float-l zr-title zr-mar-left-no">分组条件：</span>
                        <span class="zr_float-l zr-title zr_mar-min">最低值</span>
                        <input class="zr_float-l zr_input-box zr_input-min" style="text-align: center;" type="number" placeholder="0">
                        <span class="zr_float-l zr-title zr_mar-min">最高值</span>
                        <input class="zr_float-l zr_input-box zr_input-min" style="text-align: center;" type="number" placeholder="0">
                        <span class="zr_float-l zr-title zr_mar-min">分割间距</span>
                        <input class="zr_float-l zr_input-box zr_input-min" style="text-align: center;" type="number" placeholder="0">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="zr_scroll-top" id="scrollTop">
        <img src="img/top.png"/>
    </div>
    <div class="zr_scroll-top zr_scroll-bottom" id="scrollBottom">
        <img src="img/bottom.png"/>
    </div>
</div>
</body>
</html>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
    $('#scrollTop').click(function(){
        $("html,body").animate({scrollTop:0}, 100);
    });
    $('#scrollBottom').click(function(){
        var bodyHeight = $(document).height();
        $("body,html").animate({ "scrollTop": bodyHeight + "px" }, 100);
    });
    $('.zr-char-box').on('mouseenter',function () {
        $('.zr-pos-sel').show();
    }).on('mouseleave',function () {
        $('.zr-pos-sel').hide();
    });
    $('#nav-list li').click(function () {
        var i = $(this).index();
        $('.zr_common-box').eq(i).show();
        $('.zr_common-box').eq(i).siblings().hide();
        $(this).addClass('zr_green-ionic').siblings().removeClass('zr_green-ionic');
    });
</script>